<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mycss2</title>
    <style>
/*        * {
            color: dimgray;
        }*/
        h1 {
            text-align: center;
            color: darkblue;
        }
        .c1 {
            background: lightcyan;
        }
        p.c2 {
            text-align: right;
        }
        p .c3 {
            color: purple;
        }
        #id1 {
            text-decoration: underline;
        }
        .c1, #id1 {
            border: 1px solid darkred;
        }
        a:link {     /*访问前的样式*/
            text-decoration: none;
        }
        a:hover {    /*鼠标悬停的样式*/
            font-size: 1.2em;
        }
        a:visited {   /*访问后的样式 */
            color: gray;
        }
        .c3 {
            border: 1px solid blue;
            width: 50%;
        }
        .c4 {
            font-size: 15px;
        }
        .c5 {
            font-size: 2em;   /*父元素的1.2倍*/
        }
        .c6 {
            font-size: 2rem;  /*根元素的1.2倍*/
        }
        html {    /*根元素*/
            font-size: 20px;
        }
        .c7 {
            color: steelblue;
        }
        .c8 {
            color: rgb(0, 100, 0);
        }
        .c9 {
            /*color: #a025ab;*/
            /*color: #aa22ee;   !*也可以简写为*!*/
            color: #a2e;
        }
        .c10 {
            color: #8c53d0;
        }
    </style>
</head>
<body>
<p class="c7">文本颜色</p>
<p class="c8">文本颜色</p>
<p class="c9">文本颜色</p>
<p class="c10">文本颜色</p>





<div class="c4">
    <div class="c5">段落</div>
    <div class="c6">段落</div>
</div>

<h1>web开发</h1>
<p class="c3">这是p元素</p>
<p>
    <a href="http://www.microsoft.com">微软</a>
</p>
<p class="c1">这是一个段落</p>
<p class="c2">这是一个段落</p>
<p class="c1">这是一个段落</p>
<p>这是一个段落 <span class="c3">这是一个段落</span> 这是一个段落</p>
<p class="c3">这是一个段落</p>
<div class="c2">这是一个div</div>
<div id="id1">这是一个div</div>
<div>这是一个div</div>
</body>
</html>